<template>
    <section class="fuwu_list">
  		<p class="title_menu">
  			<span class="title_all">
  				<span class="title">服务资源目录</span>
  				<span class="menu_li" v-for="(item,index) in menuLi" :key="index" :class="{'active':activeItem===index}" @click="changeCurrent(index)">{{item.name}}</span>
  				<el-input class="search_input" placeholder="请输入内容" prefix-icon="el-icon-search"  v-model="form.search" > </el-input>
  			</span>
  			
  			<div class="content">
  				<div class="left">
  					<left-tab></left-tab>
  				</div>
  				<div class="right">
  					<right-tab></right-tab>
  				</div>
  			</div>
  		</p>
        
    </section>
</template>

<script>
    import leftTab from "./components/leftTab"
    import rightTab from "./components/rightTab"
    export default {
    	components:{
    		leftTab,
    		rightTab
    	},
        data() {
          return {
          		activeItem:0,
          		form:{
          			search:'',
          		},
          		menuLi:[
          			{
          				name:'经侦',
          				val:0,
          				active:false,
          			},
          			{
          				name:'情报',
          				val:1,
          				active:true,
          			},
          			{
          				name:'指挥',
          				val:2,
          				active:false,
          			},
          			{
          				name:'交警',
          				val:3,
          				active:false,
          			},
          			{
          				name:'治安',
          				val:4,
          				active:false,
          			},
          			{
          				name:'刑侦',
          				val:5,
          				active:false,
          			}
          		]
          };
        },
        methods: {
        		changeCurrent(val){/*改变当前页*/
        			this.activeItem = val;
        		}
        }
  };
</script>

<style>
	.fuwu_list{
		background: #F7F7F7;
	}
	.left{
		width: 230px;
		float: left;
		height: 1800px;
	}
	
	.right{
		width: 830px;
		margin-left: 250px;
		height: 1800px;
		background: #FFF;
	}
	.content{
		width: 1080px;
		margin: 10px auto 0 auto;
		height: 1800px;
	}
    .fuwu_list .title_menu{
    	height: 65px;
    	background: #409dfc;
    	line-height: 65px;
    }
    .fuwu_list .title_all{
    	width: 1080px;
    	margin: 0 auto;
    	display: block;
    	color: white;
    	font-size: 16px;
    }
    .fuwu_list .title{
    	font-size: 20px;
    }
    .fuwu_list .menu_li{
    	margin: 0 30px;
    	
    }
    .fuwu_list .menu_li.active{
    	background: #fff;
    	padding: 4px 7px;
    	border-radius: 20px;
    	color: #409dfc;
    }
    .fuwu_list .search_input{
    	float: right;
    	width: 180px;
    }
    .fuwu_list .search_input .el-input__inner{
    	    background-color: #fff0;
    	    border: 1px solid #fff;
    }
    .fuwu_list .search_input  .el-icon-search:before{
    	color: #fff;
    }
    .fuwu_list .search_input ::-webkit-input-placeholder{
    	color: #fff;
    }
</style>